<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>19-vue父组件通过props传值子组件</title>
</head>

<body>
  <div id="app"> {{content}}
    <childcpn :chcontent="content" :chbooks="books" @updateinfo="updateInfo"></childcpn>    
  </div>

  <template id="childcpn">
    <div>
      <p>{{chcontent}}</p>
      <button v-for="(book,index) in chbooks" @click="itemclick(book)">{{book}}</button>
    </div>
  </template>

  <script src="./js/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        content: "我是内容",
        books:[
          "JS权威指南",
          "JS高级编程指南"
        ],
      },
      methods: {
        updateInfo(book) {
          this.content = book
        }
      },
      components: {
        childcpn: {
          template: "#childcpn",
          // 通过数组直接穿参数
          // props:["chcontent"]
          props: {
            chcontent:String,
            chbooks:Array
          },
          // props: {
          //   propA: {
          //     type: String,
          //     default: "", // 基本类型
          //     required: true, //propA 为必填项
          //   },
          //    goods: {
          //     type: Array,
          //     default() { // 对象或数组默认值必须从一个工厂函数获取
          //       return []
          //     }
          //   }
          // },
          methods: {
            itemclick(book) {
              console.log(book);
              this.$emit("updateinfo", book)
            }
          },
        }
      }
    })
  </script>
</body>

</html>